<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
  <div>
    <input type="number" v-model.number="num1" />
    <select v-model="num2">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
    <input type="number" v-model.number="num3"/>=
    <span v-model="num4" v-if="num2=='+'">{{num1+num3}}</span>
    <span v-model="num4" v-else-if="num2=='-'">{{num1-num3}}</span>
    <span v-model="num4" v-else-if="num2=='*'">{{num1*num3}}</span>
    <span v-model="num4" v-else-if="num2=='/'">{{num1/num3}}</span>
  </div>

  <div>
    名称:<input type="text" v-model="name" />
    <input type="text" v-model="url" />
    <input type="text" v-model="desc" />
    <button @click="add">添加</button>
  </div>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>名称</th>
        <th>链接</th>
        <th>描述</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(item,index) in box"
        :key="index"
        :style="{'background-color': index % 2 == 0 ? '#ccc' : '#fff'}" 
         v-trcolor="index">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.link}}</td>
        <td>{{item.desc}}</td>
        <td><button class="action-btn" @click="del(index)">删除</button></td>
      </tr>

      <!-- <tr v-for="(item,index) in box" :key="index" v-color="index">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.link}}</td>
            <td>{{item.desc}}</td>
            <td><button class="action-btn" @click="del(index)">删除</button></td>
        </tr> -->
    </tbody>
  </table>
</div>
<style>
    
</style>
<script>
  Vue.directive("color", function (el, binding) {
    // console.log(binding);

    if (binding.value % 2 == 0) {
      el.style.backgroundColor = "red";
    } else {
      el.style.backgroundColor = "blue";
    }
  });
  Vue.directive("trcolor", function (el, binding) {
    el.addEventListener('mouseenter', () => {
        el.style.backgroundColor = '#e0f7fa';
      });
      
      el.addEventListener('mouseleave', () => {
        el.style.backgroundColor = binding.value % 2 == 0 ? '#ccc' : '#fff';
      });
  });
  new Vue({
    el: "#app",
    data: {
      box: [
        { name: "可乐", link: "www.baidu.com", desc: "这是一瓶可乐" },
        { name: "雪碧", link: "www.baidu.com", desc: "这是一瓶雪碧" },
        { name: "橙汁", link: "www.baidu.com", desc: "这是一瓶橙汁" },
      ],
      name: "",
      url: "",
      desc: "",
      num1: 0,
      num2:'',
      num3:0,
      num4:0,
    },
    methods: {
      add() {
        if (!this.name || !this.url || !this.desc) {
        }
        this.box.push({
          name: this.name,
          link: this.url,
          desc: this.desc,
        });
        this.name = "";
        this.url = "";
        this.desc = "";
      },
      del(index) {
        console.log(index);
        // console.log(this.box);

        this.box.splice(index, 1);
      },
    },
  });
</script>

